<template>
  <div class="container">
    <el-card shadow="never">
      <!-- 头部 -->
      <el-row>
        <el-col type="flex" justify="space-between">
          <el-form :inline="true" class="demo-form-inline" type="flex" justify="space-between">
            <el-form-item label-width="80px" label="标签名称">
              <el-input placeholder="请输入" v-model="page.tags"></el-input>
            </el-form-item>
            <el-form-item label-width="100px" label="城市">
              <el-select size="small" @change="diqu" v-model="page.province" placeholder="请选择">
                <el-option v-for="(item,ind) in options" :key="ind" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="100px" label="地区">
              <el-select v-model="page.city" placeholder="请选择">
                <el-option v-for="(item,ind) in optionsx" :key="ind" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="100px" label="企业名称">
              <el-input v-model="page.shortName"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <!-- 给form表单以及输入框绑定data中的值 -->
            <el-form :inline="true" class="demo-form-inline">
              <!-- <el-form-item label-width="80px" label="关键字">
                <el-input size="small" v-model="page.keyword" placeholder="根据文章标题搜索"></el-input>
              </el-form-item>-->
              <el-form-item label-width="100px" label="状态">
                <el-select size="small" v-model="page.state" placeholder="请选择">
                  <!-- <el-option label="启用" value="shanghai"></el-option>
                  <el-option label="禁用" value="beijing"></el-option>-->

                  <el-option
                    v-for="item in enumeration.status"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <!-- 给清除一个点击事件，讲form表单中的input值清空 -->
                <el-button size="small" @click="empty">清除</el-button>
                <el-button size="small" type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col style="text-align: right" :span="8">
          <div class="grid-content bg-purple">
            <el-button size="small" type="success" @click="skills">
              <i class="el-icon-edit"></i>
              <span>新增用户</span>
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 提示信息   ${total}-->
      <el-alert
        style="margin-bottom: 18px"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- 表格 -->
      <el-table :data="formList">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="number" label="企业编号"></el-table-column>
        <el-table-column prop="company" label="企业简称"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="creatorID" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期"></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template v-slot="{row}">{{row.state === 1? '启用' :'禁止'}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template v-slot="{row}">
            <el-button @click="editor(row)" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button
              @click="conversion(row)"
              :type="row.state === 1 ? 'warning':'success'"
              :icon="row.state === 1 ?  'el-icon-close' : 'el-icon-check'"
              circle
            >
              <!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
            </el-button>
            <el-button @click="delShc(row)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- ---   分页   ---- -->
      <!-- 给切换当前页 和一个显示数据的条数 一个事件 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        :page-size="page.pagesize"
        :current-page="page.page"
        :total="total"
        layout="prev,pager,next,sizes,jumper"
        :page-sizes="[4, 8, 10, 20]"
        @current-change="changePage"
        @size-change="sizepage"
      ></el-pagination>
    </el-card>

    <!-- 新增、编辑弹层 -->
    <companysAdd ref="Neditor" :showPanys.sync="showPanys" @addupdate="addupdate"></companysAdd>
  </div>
</template>

<script>
// 导入启动和禁止的枚举方法
import enumeration from '@/api/base/baseApi'
// 导入获取列表、删除、状态的 接口
import { list, remove, disabled } from '@/api/hmmm/companys'
// 导入新增、编辑弹层
import companysAdd from '../components/companys-add'
// 导入城市、地区的 方法
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  data() {
    return {
      enumeration, // 存放启动、禁止的枚举
      page: {
        // 存放获取列表的数据
        page: 1, // 当前第几页
        pagesize: 10, // 一页多少条数据
        tags: '', // 存放公司简称
        province: '', // 存放城市
        city: '', // 存放地区
        shortName: '', // 存放公司名称
        state: null // 存放数据状态
      },
      total: 0, // 列表数据 总数
      formList: [], // 存放表格中的数据
      showPanys: false, // 控制新增、编辑弹层
      options: [], // 存放城市的数据
      optionsx: [] // 存放地区的数据
    }
  },

  components: {
    companysAdd // 注册 新增、编辑弹层
  },
  created() {
    this.list() // 执行获取列表
    this.chengshi() // 执行获取城市数据
  },
  methods: {
    // 获取列表
    async list() {
      const { data } = await list(this.page)
      this.formList = data.items
      this.total = data.counts
      // console.log(data.items);
    },

    // 请求城市
    async chengshi() {
      this.options = await provinces()
    },
    // 请求地区
    async diqu() {
      this.page.city=''
      this.optionsx = await citys(this.page.province)
    },

    // 修改文章状态
    async conversion(row) {
      try {
        await disabled({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (error) {
        console.log(error)
      }
    },

    // 新增用户按钮
    skills() {
      this.showPanys = true
    },
    // 清除按钮
    empty() {
      this.page = {
        page: 1,
        pagesize: 10,
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null
      }
    },
    // 搜索按钮
    async search() {
      try {
        const { data } = await list(this.page)
        this.formList = data.items
        this.total = data.counts
        this.$message.success('搜索成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 切换分页
    changePage(newPage) {
      this.page.page = newPage
      this.list()
    },
    // 切换一页的数据
    sizepage(newPagesize) {
      this.page.pagesize = newPagesize
      this.list()
    },

    // 删除列表数据
    async delShc(row) {
      try {
        await this.$confirm('您确定删除吗')
        await remove(row)
        this.list()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 编辑按钮
    editor(row) {
      this.$refs.Neditor.disabled(row)
      this.showPanys = true
    },
    // 新增、编辑完成后 关闭弹层并 重新获取列表
    addupdate() {
      this.list()
      this.showPanys = false
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
}
</style>
